<template>
    <div id="container">

    </div>
</template>

<script setup lang="ts">
import { onMounted,ref } from 'vue'
import * as echarts from 'echarts';
import {getSimpleDataApi} from "@/api/dataTotal";

let myChart:any = null;

// x轴的数据
const xAxis = ref<any>([]);
// 销售数据：
const sales = ref<any>([]);

//获取数据
const getSimpleData = (cb:any) => {
    getSimpleDataApi().then(res=>{
        if(res.data.code==="200"){
            xAxis.value = [];
            sales.value = [];
            res.data.data.forEach((item:any)=>{
                xAxis.value.push(item.x);
                sales.value.push(item.val);
            })
            cb && cb();
        }
    })
}

// 初始化柱状图
const initBarChart = () => {
    myChart = echarts.init(document.getElementById('container'),'dark');
}

const updateBarChart=()=>{
    // 绘制图表
    myChart.setOption({
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
            data: xAxis.value
        },
        yAxis: {},
        series: [
            {
                name: '销量金额',
                type: 'bar',
                data: sales.value
            },
            {
                name: '销量数量',
                type: 'bar',
                data: [5,20,10,30,15,9,6]
            }
        ]
    });
}

onMounted(()=>{
    initBarChart();
     getSimpleData(updateBarChart);
    setInterval(()=>{
     getSimpleData(updateBarChart);
    },2000);
});

</script>

<style lang="scss" scoped>
#container {
    width: 100%;
    height: 100%;
}
</style>